<template>
    <div class="my-shop-container">
        <h1>购物车列表</h1>
        <ul class="shop-header">
            <li>商品名称</li>
            <li>商品价格</li>
            <li>数量</li>
        </ul>

        <ul class="shop-list">
            <li 
                v-for="(item,index) in $store.state.shopAllList"
                :key="index">
                <span>{{item.goodsName}}</span>
                <span>{{item.goodsPrice}}</span>
                <button @click="addShopCar(item)" size="mini">addShopCar</button>
            </li>
        </ul>

        <!-- {{$stotre.state.shopAllList}} -->
    </div>
</template>

<script>
export default {
    data(){
        return{}
    },
    methods:{
        addShopCar(data){
            console.log('当前商品',data)
            this.$stire.commit('addShopCarList',data)
        }
    }
}
</script>

<style lang="scss" scoped>
h1{
    margin: 0;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.my-shop-container {
    flex: 1;
    height: 100%;
    border-right: 2px solid #e4393c;

    .shop-header{
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
    

        li{
            flex: 1;
            text-align: center;
            line-height: 30px;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }
    }

    .shop-list{
        li {
            display: flex;
             justify-content: space-between;

            span {
             flex: 1;
                text-align: center;
                line-height: 25px;
             }

            .el-button {
                flex: 1;
            }
        }
    }
}
</style>